<template>
    <div class="container">
        <div class="imageAndInput">
            <div class="image">
                <img v-for="value in initData.images" :src="showResult_images(value)" alt="">
            </div>
            <div class="showInput">
                <!-- 对话 -->
                <div class="dialog">
                    <div v-for="value in 100" :key="value" class="dialogItem">
                        <!-- 随机生成文字 -->
                        <div class="text">{{ value }}</div>
                    </div>
                </div>
                <!-- 显示当前上传的文件 -->
                <div class="showFile">{{ singleFile[0]?.name }}</div>
                <!-- 输入框 -->
                <div class="inputBox">
                    <!-- 文本域输入框 -->
                    <textarea name="" id="" class="inputTextarea"></textarea>
                    <div class="sendButton">
                        <div class="inputBtn" @click="openlpoadFile">
                            <SvgIcon :svg="svgAddFile" :size="20"></SvgIcon>
                        </div>
                        <div class="inputBtn">
                            <SvgIcon :svg="svgSend" :size="20"></SvgIcon>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tableAndAnswer">
            <div class="showTable">
                <!-- 当只有一个表格时，直接展示，不使用tabs -->
                <div v-if="tableData.length === 1" class="single-table-container">
                    <div class="table-container">
                        <!-- 前5行数据表格 -->
                        <div class="data-table">
                            <h3>前5行数据预览：</h3>
                            <el-table :data="tableData[0].first_5_rows.data" border stripe style="width: 100%"
                                max-height="400">
                                <el-table-column v-for="(column, index) in tableData[0].first_5_rows.columns"
                                    :key="index" :prop="index.toString()" :label="column" />
                            </el-table>
                            <div class="data-info">
                                原数据:{{ tableData[0].row_count }}行/{{ tableData[0].col_count }}列
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 当有多个表格时，使用tabs切换 -->
                <div v-else-if="tableData.length > 1">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane v-for="item in tableData" :key="item.file_id" :label="item.file_name"
                            :name="item.file_name">
                            <!-- 表格内容 -->
                            <div class="table-container">
                                <!-- 前5行数据表格 -->
                                <div class="data-table">
                                    <h3>前5行数据预览：</h3>
                                    <el-table :data="item.first_5_rows.data" border stripe style="width: 100%"
                                        max-height="400">
                                        <el-table-column v-for="(column, index) in item.first_5_rows.columns"
                                            :key="index" :prop="index.toString()" :label="column" />
                                    </el-table>
                                    <div class="data-info">
                                        原数据:{{ item.row_count }}行/{{ item.col_count }}列
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>

                <!-- 当没有表格数据时，可以显示提示信息（可选） -->
                <div v-else class="no-data">
                    暂无数据
                </div>
            </div>
            <div class="showAnswer">
                <div class="answer">
                    <div v-for="value in 100" :key="value" class="dialogItem">
                        <div class="text">{{ value }}</div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="showUpload" title="上传文件" width="600px" align-center>
            <!-- 实现拖拽上传功能，showUploadText内展示上传文件名及文件大小 -->
            <Xupload v-model="singleFile" accept=".xlsx,.csv,.txt" hint="仅支持.xlsx,.csv,.txt格式" />
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, watch, ref } from 'vue'
// 图标导入
import svgSend from '@/assets/svg/send.svg?raw'
import svgAddFile from '@/assets/svg/addFile.svg?raw'
import defaultImage from '@/assets/default.webp';

import { aiUploadFile } from '@/api/index.js'

import { BASE_URL_STATIC } from '@/utils/zongIp.js'// 静态资源IP地址
const initData = ref({
    images: []
})
const showResult_images = (itemData) => {
    // 去掉path路径的第一个.
    const url = itemData.path?.replace(/^\./, '');
    return BASE_URL_STATIC + url;
}

const showUpload = ref(false);
const singleFile = ref([])
const openlpoadFile = () => {
    showUpload.value = true;
}

// 示例表格
const activeName = ref('2023-10-01.xlsx')

const tableData = ref([
    {
        "file_id": "9ff423b2-035b-4e84-8bc4-99fcbcf6ca2d",
        "file_name": "2023-10-01.xlsx",
        "file_path": "D:\\qilin\\Draw\\data_analysis\\uploads\\9ff423b2-035b-4e84-8bc4-99fcbcf6ca2d\\2023-10-01.xlsx",
        "file_type": ".xlsx",
        "row_count": 61,
        "col_count": 5,
        "first_5_rows": {
            "columns": [
                "序号",
                "名称",
                "客流量(人)",
                "客流量同比增速(%)",
                "夜间监测量占比(%)"
            ],
            "data": [
                [
                    1,
                    "商圈28",
                    10886610,
                    -14.23,
                    45.78
                ],
                [
                    2,
                    "商圈9",
                    598242,
                    31.98,
                    32.86
                ],
                [
                    3,
                    "商圈50",
                    270292,
                    45.91,
                    31.27
                ],
                [
                    4,
                    "商圈8",
                    306716,
                    -26.35,
                    40.21
                ],
                [
                    5,
                    "商圈54",
                    836340,
                    -14.62,
                    49.96
                ]
            ]
        }
    }
])

const handleClick = (tab, event) => {
    console.log(tab, event);
}
onMounted(() => {
    let data = JSON.parse(localStorage.getItem('chartItem'))
    // 匹配data.children中name=imgs的一项
    initData.value.images = data.children.find(item => item.name === 'imgs').children
    console.log(initData.value.images);

})
// 监听singleFile的变化
watch(singleFile, (newValue) => {
    if (newValue.length > 0) {
        // 关闭弹窗
        showUpload.value = false;
        let formData = new FormData();
        for (let i = 0; i < newValue.length; i++) {
            formData.append('files', newValue[i]);
        }
        aiUploadFile(formData).then((res) => {
            if(res.success){
                console.log(res.data.files);
                tableData.value=res.data.files
            }else{
                singleFile.value=[]
                ElMessage.error(res.message)
            }
        })
    }
    console.log(newValue);
});
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: calc(100vh - 80px);
    background-color: #fefefe;
    display: flex;

    .tableAndAnswer,
    .imageAndInput {
        width: calc(50% - 20px);
        margin: 10px;
        height: calc(100% - 22px);
        border-radius: 10px;
        box-shadow: 3px 3px 5px 1px #bcbdc0;
        background-color: #fff;
        border: 1px solid #eaeaea;
    }

    .imageAndInput {
        display: flex;
        flex-direction: column;

        .image {
            // height: 200px;
            padding: 10px 0;
            margin: 0 10px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;

            img {
                max-height: 100px;
                margin-right: 10px;
                max-width: 200px;
                border-radius: 5px;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            }
        }

        .showInput {
            flex: 1;
            height: 1px;
            display: flex;
            flex-direction: column;

            .dialog {
                height: calc(100% - 180px);
                margin: 10px;
                overflow-y: auto;
            }
            .showFile{
                border-top: 1px solid #ccc;
                width: calc(100% - 20px);
                margin-left: 10px;
                padding: 5px 0;
                text-align: right;
                font-size: 12px;
                font-weight: 700;
                color: #999;
                height: 17px;
            }
            .inputBox {
                position: relative;
                width: calc(100% - 20px);
                margin-left: 10px;
                border-top: 1px solid #ccc;
                height: 150px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 10px;
                .inputTextarea {
                    width: calc(100% - 20px);
                    height: calc(100% - 40px);
                    border-radius: 10px;
                    padding: 5px;
                    border: 1px solid #dcdfe6;
                    resize: none;
                    font-family: inherit;
                }

                .sendButton {
                    position: absolute;
                    display: flex;
                    bottom: -4px;
                    right: 10px;

                    .inputBtn {
                        border-radius: 50%;
                        width: 36px;
                        height: 36px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #606266;
                        border: 1px solid #dcdfe6;
                        margin-right: 10px;
                        background-color: #fff;
                        cursor: pointer;

                        &:hover {
                            background-color: #ecf5ff;
                            border: 1px solid #c6e2ff;
                            color: #409eff;
                        }
                    }
                }
            }
        }
    }

    .tableAndAnswer {
        height: calc(100% - 22px);
        display: flex;
        flex-direction: column;

        .showTable {
            width: calc(100% - 20px);
            margin: 10px;
            overflow-y: auto;
            border-bottom: 1px solid #dcdfe6;

            .table-container {
                // padding: 15px;
                height: calc(100% - 30px);
                overflow-y: auto;

                .file-info {
                    margin-bottom: 20px;
                    padding: 15px;
                    background-color: #f8f9fa;
                    border-radius: 8px;
                }

                .data-table {
                    margin-bottom: 5px;

                    h3 {
                        margin: 0 0 5px 0;
                        color: #303133;
                        font-size: 14px;
                        font-weight: 600;
                        display: flex;
                        justify-content: space-between;
                    }

                    .data-info {
                        text-align: right;
                        font-size: 13px;
                        margin-top: 8px;
                        font-weight: 700;
                        color: #666;
                    }

                    :deep(.el-table) {
                        font-size: 12px;

                        .el-table__header th {
                            background-color: #f5f7fa;
                            font-weight: 600;
                        }

                        .el-table__body td {
                            padding: 8px 0;
                        }
                    }
                }

                .columns-info {
                    h3 {
                        margin: 0 0 10px 0;
                        color: #303133;
                        font-size: 14px;
                        font-weight: 600;
                    }

                    .column-tag {
                        font-size: 12px;
                        padding: 4px 8px;
                    }
                }
            }
        }

        .showAnswer {
            height: 1px;
            overflow-y: auto;
            margin: 10px;
            border-radius: 8px;
            border: 1px solid #dcdfe6;
            flex: 1;
            padding: 10px;

        }
    }
}

// 全局样式调整
:deep(.el-tabs__content) {
    height: calc(100% - 40px);
    overflow-y: auto;
}

:deep(.el-tab-pane) {
    height: 100%;
}

:deep(.demo-tabs) {

    // border-bottom: 1px solid #ccc;
    .cell {
        line-height: normal;
    }

    >.el-tabs__content {
        padding: 0;
        height: calc(100% - 40px);
    }
}

:deep(.el-tabs__header) {
    margin: 0 0 10px 0;
}

:deep(.el-descriptions) {
    margin-bottom: 20px;
}

:deep(.el-descriptions__body) {
    background-color: #fff;
}
</style>